import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
// 将VUX的数据储存在本地
//Add this line
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState()],
 state: {
    // 所有商品信息
    goodslist:[],
    // 购物车信息
    shopcarinfo:[],
    //购物车包含数量信息
    shopcarlist:[]
  },
  mutations: {
    //初始化list数据，data为传过来的数据
    initGoodlist(state, list) {
      state.goodslist = list
    },
    //上拉加载更多
    addGoodlist(state, list) {
      state.goodslist.push(...list)
      console.log(list);
    },
    // 添加购物车信息(不同种)
    addShopcarinfo(state, list) {
      state.shopcarlist.push(...list)
      console.log(state.shopcarlist);
    },
    // 添加购物车信息（同种）
    addShopcarinfos(state, list) {
      console.log(list);
      state.shopcarlist.forEach(item => {
        if(item.id == list.id) {
          item.count+= list.count
        }
      })
    },
    //初始化购物车页面
    initShopcar(state, list) {
      state.shopcarlist = list
      // console.log(state.shopcarlist);
    },
    // 步进器增加事件
    add(state, n) {
      state.shopcarlist.forEach(item => {
        if(item.id == n)item.count++
      })
      console.log(state.shopcarlist);
      
    },
    // 步进器减小事件
    sub(state, n) {
      state.shopcarlist.forEach(item => {
        if(item.id == n)item.count--
      })
    },
    // 购物车左滑删除事件
    remove(state, n) {
      var newarr = []
      state.shopcarlist.forEach(item => {
        if(item.id !== n)  newarr.push(item)
      })
      state.shopcarlist = newarr
      
    }
  },
  actions: {
    //获取商品列表
    async getGoodslist($store,n) {
      const {data: res} = await axios.get(`/api/getgoods?pageindex=${n}`)
      console.log('res', res)
      if(n==1) {
        $store.commit('initGoodlist',res.message)
      }
      else if(n==2) {
        $store.commit('addGoodlist',res.message)
      }
    },
    //获取购物车商品信息
    async getshopcarinfo($store) {
      // 是获取过来的id以字符串形式拼接
     const info = $store.state.shopcarlist
     const id = []
     info.forEach(item => {
         id.push(item.id)
     })
     const ids = id.join(',')
     // 调用接口获取购物车信息
     const {data:res} = await axios.get(`/api/goods/getshopcarlist/${ids}`)
     res.message.forEach(item=> {
         var n = 0
         item.count=info[n].count
         n++
     })
     $store.commit('initShopcar',res.message)
    },
    // 添加购物车信息
    async addShopcar($store, n) {
       // 如果添加的为不同商品
      console.log(n);
      // console.log(n.count);
      var flag = true
       $store.state.shopcarlist.forEach(item => {
         if(item.id == n.id)
         return flag = false
       }
       )
       console.log(flag);
       
      //  直接将商品信息添加至state数组中
       if(flag == true) {
          const {data:res} = await axios.get(`/api/goods/getshopcarlist/${n.id}`)
          res.message[0].count = n.count
          $store.commit('addShopcarinfo', res.message)
          console.log("不同种商品");
       }
      //  //如果添加的为同种商品
       else{
        var arr ={
          id: n.id,
          count: n.count
        }
        console.log("同种商品");
        $store.commit('addShopcarinfos', arr)
        
        
        // $store.state.shopcarlist[flag].count += n.count
       }
    }
  },
  modules: {
  },
  getters: {
    count(state) {
      var count = 0
      state.shopcarlist.forEach(item=>{
        count+=item.count
      })
      return count
    },
    total(state) {
      var total = 0
      state.shopcarlist.forEach(item => {
        console.log(item.count,item.sell_price);
        total += (item.count*item.sell_price)
      })
      return total*100
    },
    //购物车页面判断是否为空
    isEmpty(state) {
      if(state.shopcarlist.length == 0) {
        return true
      }else{
        return false
      }
    }
  }
})
